<script setup lang="ts">
import officeApi from "@/api/office/officeApi";
import { applyPureReactInVue } from 'veaury'
import { Excalidraw, convertToExcalidrawElements, defaultLang, languages } from "@excalidraw/excalidraw";

const props = defineProps(["officeId","id"]);

const edraw = applyPureReactInVue(Excalidraw);
let api = null;

// const container = ref();
const docValue = ref([]);

const queryData = async () => {
	let data = await officeApi.getContentByOfficeId({
		officeId: props.officeId
	})

	if (!data) {
		data = {};
	}
	if (!data.content) {
		return {}
	}
	return JSON.parse(data.content);
}
const initWork = async () => {
	const data = await queryData();
	// console.log(data)
	docValue.value = data;
	// workbook = univer.createUnit(UniverCore.UniverInstanceType.UNIVER_DOC, data)
}

onMounted(async () => {

})

const saveContent = () => {
	let data = getValue();
	officeApi.saveContent({
		officeId: props.officeId,
		content: JSON.stringify(data),
		fileTypeCode: "whiteboard"
	});
}

const updateScnce = () => {
	if (!api) {

		return;
	}
	if (!docValue.value || docValue.value.length <= 0 ||
		JSON.stringify(docValue.value) == '{}'
	) {
		return;
	}
	api.updateScene({
		elements: docValue.value,
		appState: {
			zenModeEnabled: true, viewBackgroundColor: "#a5d8ff"

		},
		scrollToContent: true,
	});
}

const getValue = () => {
	// console.log(workbook)
	// const saveData = workbook.save();
	// const c = wordEditor.value.getValue();
	// return c;
	// const data = mindMap.value.getData(true)
	return api.getSceneElements();

	// return null;
	// return saveData;
}

// const elements = convertToExcalidrawElements([
// 	{
// 		type: "rectangle",
// 		x: 100,
// 		y: 250,
// 	},
// 	{
// 		type: "ellipse",
// 		x: 250,
// 		y: 250,
// 	},
// 	{
// 		type: "diamond",
// 		x: 380,
// 		y: 250,
// 	},
// ]);
const initialData = ref({
	elements: [],
	appState: {
		zenModeEnabled: true, viewBackgroundColor: "#a5d8ff"

	},
	scrollToContent: true,

})


const excalidrawAPI = async (a) => {
	api = a;

	await initWork();

	updateScnce();



}

defineExpose({
	getValue
})

</script>

<template>
	<div style="height:100%">
		<a-button type="primary" @click="saveContent" v-if="props.id" style="position:absolute;right:0;z-index:9999">保存</a-button>
		<edraw :initialData="initialData" langCode="zh-CN" :excalidrawAPI="excalidrawAPI"></edraw>
	</div>
</template>

<style scoped></style>
